import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ichinesereader/models/forms/forms.dart';
import 'package:ichinesereader/models/register/paymentUserInfo.dart';
import 'package:ichinesereader/utils/helper.dart';
import 'package:reactive_forms/reactive_forms.dart';
import '../../../controller/register.dart';

// ignore: must_be_immutable
class UserInfoInregister extends StatelessWidget {
  UserInfoInregister({
    Key? key,
  }) : super(key: key);
  RegisterController _registerController = Get.put(RegisterController());
  Widget build(BuildContext context) {
    //String? product = Get.arguments;
    UserInfoFormModel formModel = UserInfoFormModel();
    var form = formModel.form;
    form.control("username").setAsyncValidators([asyncValidatorUniqueUsername]);
    form.control("email").setAsyncValidators([mustUniqueEmail]);
    PaymentUserInfo dataForPay = _registerController.userInfo;
    // refill user info after come back
    if (dataForPay.firstName != null) {
      form.control('firstname').value = dataForPay.firstName;
      form.control('lastname').value = dataForPay.lastName;
      form.control('username').value = dataForPay.userName;
      form.control('email').value = dataForPay.email;
      form.control('confirmemail').value = dataForPay.email;
      form.control('password').value = dataForPay.password;
      form.control('confirmpassword').value = dataForPay.password;
      form.control('phoneNumber').value = dataForPay.phoneNumber;
      form.control('subscription').value = dataForPay.subscription;
    }

    return Scaffold(
        appBar: AppBar(
          title: Text("User Info".tr),
          // leading: BackButton(onPressed: () {
          //   Get.toNamed('https://ichinesereader.com/');
          // }),
        ),
        body: SingleChildScrollView(
          child: ReactiveForm(
            formGroup: form,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 50),
              child: Column(
                children: [
                  SizedBox(
                    height: 16,
                  ),
                  Row(
                    children: [
                      Expanded(
                        child: Column(
                          children: [
                            Card(
                              child: Padding(
                                padding:
                                    const EdgeInsets.symmetric(horizontal: 20),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisSize: MainAxisSize.min,
                                  children: <Widget>[
                                    const SizedBox(height: 25),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: <Widget>[
                                        Text('Free'.tr,
                                            style: TextStyle(
                                                color: Color.fromARGB(
                                                    255, 105, 158, 200),
                                                fontSize: 20,
                                                fontWeight: FontWeight.w500)),
                                      ],
                                    ),
                                    const SizedBox(height: 20),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: [
                                        Expanded(
                                          child: ReactiveRadioListTile(
                                              formControlName: 'subscription',
                                              value: 'trial',
                                              title: Text('14 days Trial')),
                                        ),
                                      ],
                                    ),
                                    const SizedBox(height: 10),
                                    Divider(color: Colors.black),
                                    const SizedBox(height: 10),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      children: <Widget>[
                                        Expanded(
                                            child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                              Text(
                                                  'Access to all contents.'.tr),
                                            ])),
                                      ],
                                    ),
                                    const SizedBox(height: 10),
                                    Divider(color: Colors.black),
                                    const SizedBox(height: 10),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      children: <Widget>[
                                        Expanded(
                                            child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                              Text('Full functionality'.tr),
                                            ])),
                                      ],
                                    ),
                                    const SizedBox(height: 10),
                                    Divider(color: Colors.black),
                                    const SizedBox(height: 10),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      children: <Widget>[
                                        Expanded(
                                            child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                              Text('Try before you buy.'.tr),
                                            ])),
                                      ],
                                    ),
                                    const SizedBox(height: 30),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(
                            children: [
                              Card(
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 20),
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    mainAxisSize: MainAxisSize.min,
                                    children: <Widget>[
                                      const SizedBox(height: 25),
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: <Widget>[
                                          Text('\$7.99'.tr,
                                              style: TextStyle(
                                                  color: Color.fromARGB(
                                                      255, 105, 158, 200),
                                                  fontSize: 20,
                                                  fontWeight: FontWeight.w500)),
                                        ],
                                      ),
                                      const SizedBox(height: 20),
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Expanded(
                                            child: ReactiveRadioListTile(
                                                formControlName: 'subscription',
                                                value: 'icr-monthly',
                                                title: Text(
                                                    'Monthly Subscription')),
                                          ),
                                        ],
                                      ),
                                      const SizedBox(height: 10),
                                      Divider(color: Colors.black),
                                      const SizedBox(height: 10),
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        children: <Widget>[
                                          Expanded(
                                              child: Column(
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.center,
                                                  children: [
                                                Text('Access to all contents.'
                                                    .tr),
                                              ])),
                                        ],
                                      ),
                                      const SizedBox(height: 10),
                                      Divider(color: Colors.black),
                                      const SizedBox(height: 10),
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        children: <Widget>[
                                          Expanded(
                                              child: Column(
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.center,
                                                  children: [
                                                Text('Full functionality'.tr),
                                              ])),
                                        ],
                                      ),
                                      const SizedBox(height: 10),
                                      Divider(color: Colors.black),
                                      const SizedBox(height: 10),
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        children: <Widget>[
                                          Expanded(
                                              child: Column(
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.center,
                                                  children: [
                                                Text('Try before you buy.'.tr),
                                              ])),
                                        ],
                                      ),
                                      const SizedBox(height: 30),
                                    ],
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      Expanded(
                        child: Column(
                          children: [
                            Card(
                              child: Padding(
                                padding:
                                    const EdgeInsets.symmetric(horizontal: 20),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisSize: MainAxisSize.min,
                                  children: <Widget>[
                                    const SizedBox(height: 25),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: <Widget>[
                                        Text('\$79.99'.tr,
                                            style: TextStyle(
                                                color: Color.fromARGB(
                                                    255, 105, 158, 200),
                                                fontSize: 20,
                                                fontWeight: FontWeight.w500)),
                                      ],
                                    ),
                                    const SizedBox(height: 20),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: [
                                        Expanded(
                                          child: ReactiveRadioListTile(
                                              formControlName: 'subscription',
                                              value: 'icr-yearly',
                                              title:
                                                  Text('Yearly Subscription')),
                                        ),
                                      ],
                                    ),
                                    const SizedBox(height: 10),
                                    Divider(color: Colors.black),
                                    const SizedBox(height: 10),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      children: <Widget>[
                                        Expanded(
                                            child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                              Text(
                                                  'Access to all contents.'.tr),
                                            ])),
                                      ],
                                    ),
                                    const SizedBox(height: 10),
                                    Divider(color: Colors.black),
                                    const SizedBox(height: 10),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      children: <Widget>[
                                        Expanded(
                                            child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                              Text('Full functionality'.tr),
                                            ])),
                                      ],
                                    ),
                                    const SizedBox(height: 10),
                                    Divider(color: Colors.black),
                                    const SizedBox(height: 10),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      children: <Widget>[
                                        Expanded(
                                            child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                              Text('Try before you buy.'.tr),
                                            ])),
                                      ],
                                    ),
                                    const SizedBox(height: 30),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 20),
                    child: Row(
                      children: [
                        Expanded(
                          child: Column(
                            children: [
                              ReactiveTextField(
                                formControlName: 'firstname',
                                style: Theme.of(context).textTheme.titleSmall,
                                decoration: InputDecoration(
                                  labelText: 'First Name'.tr + '*',
                                ),
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              ReactiveTextField(
                                formControlName: 'lastname',
                                style: Theme.of(context).textTheme.titleSmall,
                                decoration: InputDecoration(
                                  labelText: 'Last Name'.tr + '*',
                                ),
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              ReactiveTextField(
                                formControlName: 'email',
                                style: Theme.of(context).textTheme.titleSmall,
                                validationMessages: {
                                  'unique': (_) =>
                                      'The email is already used'.tr,
                                },
                                textInputAction: TextInputAction.next,
                                decoration: InputDecoration(
                                  labelText: 'Email'.tr + '*',
                                ),
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              ReactiveTextField(
                                formControlName: 'confirmemail',
                                style: Theme.of(context).textTheme.titleSmall,
                                decoration: InputDecoration(
                                  labelText: 'Confirm Email'.tr + '*',
                                ),
                              ),
                              SizedBox(
                                height: 16,
                              ),
                            ],
                          ),
                        ),
                        SizedBox(
                          width: 40,
                        ),
                        Expanded(
                          child: Column(
                            children: [
                              ReactiveTextField(
                                formControlName: 'username',
                                style: Theme.of(context).textTheme.titleSmall,
                                decoration: InputDecoration(
                                  labelText: 'User Name'.tr + '*',
                                ),
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              ReactiveTextField(
                                formControlName: 'password',
                                obscureText: true,
                                style: Theme.of(context).textTheme.titleSmall,
                                decoration: InputDecoration(
                                  labelText: 'Password'.tr + '*',
                                  // border: OutlineInputBorder(
                                  //     borderRadius: BorderRadius.circular(8.0)),
                                ),
                                validationMessages: {
                                  ValidationMessage.pattern: (_) =>
                                      'Password pattern not right'.tr
                                },
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              ReactiveTextField(
                                formControlName: 'confirmpassword',
                                obscureText: true,
                                style: Theme.of(context).textTheme.titleSmall,
                                decoration: InputDecoration(
                                  labelText: 'Confirm Password'.tr + '*',
                                  // border: OutlineInputBorder(
                                  //     borderRadius: BorderRadius.circular(8.0)),
                                ),
                                validationMessages: {
                                  ValidationMessage.mustMatch: (_) =>
                                      'Password must match'.tr
                                },
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              ReactiveTextField(
                                formControlName: 'phoneNumber',
                                style: Theme.of(context).textTheme.titleSmall,
                                decoration: InputDecoration(
                                  labelText: 'Phone'.tr + '*',
                                ),
                              ),
                              SizedBox(
                                height: 16,
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      // OutlinedButton(
                      //   child: Text('Back'.tr,
                      //       style: TextStyle(
                      //           fontSize: 16, fontWeight: FontWeight.w500)),
                      //   onPressed: () {
                      //     Get.toNamed('/register');
                      //   },
                      // ),
                      ReactiveFormConsumer(builder: (context, form, child) {
                        return OutlinedButton(
                            child: Text('Register'.tr,
                                style: TextStyle(
                                    fontSize: 16, fontWeight: FontWeight.w500)),
                            onPressed: () {
                              if (form.control('subscription').value == null) {
                                showSnackMsg('Please select the product type');
                              } else {
                                if (!form.valid) {
                                  form.markAllAsTouched();
                                  return;
                                }
                                _registerController.setPlanId(
                                    form.control('subscription').value);
                                PaymentUserInfo dto = new PaymentUserInfo();
                                dto.email = form.control('email').value;
                                dto.firstName = form.control('firstname').value;
                                dto.lastName = form.control('lastname').value;
                                dto.userName = form.control('username').value;
                                dto.password = form.control('password').value;
                                dto.phoneNumber =
                                    form.control('phoneNumber').value;
                                dto.subscription =
                                    form.control('subscription').value;
                                dto.firstStep = true;
                                if (dto.subscription == 'trial') {
                                  dto.trial = true;
                                } else {
                                  dto.trial = false;
                                }

                                _registerController.setUserInfo(dto);
                                _registerController.setPlanId(
                                    form.control('subscription').value);
                                // _registerController
                                //     .getPaymentToken(dto)
                                //     .then((value) {
                                //   // Get.toNamed(
                                //   //     '/account/create/individual/language');
                                // });
                                Get.toNamed(
                                    '/account/create/individual/language');
                              }
                            });
                      }),
                      const SizedBox(width: 8),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ));
  }
}
